import React from 'react';
import SF from './views/SF';
import StarBucks from './views/StarBucks';
import RouterTest from './views/RouterTest'
import TodoList from './views/TodoList'
import Detail from './views/TodoList/Detail'
import { BrowserRouter, Route, Redirect, Switch, Link } from 'react-router-dom'
class App extends React.Component {
  render() {
    return (
        <div>
          <BrowserRouter>
            <Link to="/starBucks">星巴克</Link>
            <Link to="/sf">顺丰</Link>
            <Link to="/test">路由练习</Link>
            <Link to="/todo">todo</Link>
            <Switch>
              {/* <Route path="/sf">
                <SF></SF>
              </Route> */}
              <Route path="/sf" component={SF} exact></Route>
              <Route path="/todo/detail" component={Detail}></Route>
              <Route path="/todo" component={TodoList}></Route>
              {/* <Route path="/sf" render={props => <SF {...props}></SF>}></Route> */}
              <Route path="/starBucks" component={StarBucks}></Route>
              <Route path="/test" component={RouterTest}></Route>
              <Redirect from="/" to="/sf"></Redirect>
            </Switch>
          </BrowserRouter>
        </div>
    );
  }
}
export default App;
